<template>
    <el-dialog v-model="baTable.table.extend!.showReceiveDialog" title="确认收货" width="50%">
        <div class="receive-dialog">
            <el-alert
                type="warning"
                :closable="false"
                show-icon
                title="请确认已收到寄回的商品，换货填写换货后的物流信息，退货退款填写退款信息，确认后会自动退回付款金额（原路退款）"
            />
            <el-form class="receive-form">
                <el-form-item label="售后类型：">
                    <el-tag type="danger">{{ $t('shop.order.refund.refund_type ' + baTable.table.extend!.orderData.refund_type) }}</el-tag>
                </el-form-item>
                <div v-if="baTable.table.extend!.orderData.refund_type == 1">
                    <el-form-item label="申请金额：">
                        <text>{{ baTable.table.extend!.orderData.apply_money }} 元</text>
                    </el-form-item>
                    <el-form-item label="退款金额：">
                        <el-input-number
                            style="margin-right: 10px"
                            v-model="refundForm.refund_money"
                            :min="0.01"
                            :precision="2"
                            :max="orderPayPrice"
                            size="small"
                        />元 (不能超过订单支付金额)
                    </el-form-item>
                    <el-form-item label="退款运费：">
                        <el-input-number
                            style="margin-right: 10px"
                            v-model="refundForm.refund_freight"
                            :min="0.0"
                            :precision="2"
                            :max="orderPayrefundFreight"
                            size="small"
                        />元 (不能超过订单总运费)
                    </el-form-item>
                    <el-form-item label="退款总额：">
                        <text class="price">{{ (refundForm.refund_money + refundForm.refund_freight).toFixed(2) }} 元</text>
                    </el-form-item>
                </div>
                <div v-if="baTable.table.extend!.orderData.refund_type == 2">
                    <FormItem
                        label="物流公司"
                        type="remoteSelect"
                        v-model="refundForm.delivery_company_id"
                        :input-attr="{
                            pk: 'id',
                            field: 'name',
                            remoteUrl: '/admin/shop.delivery.company/company',
                        }"
                        placeholder="选择物流公司"
                    />
                    <el-form-item label="物流单号">
                        <el-input v-model="refundForm.delivery_no" />
                    </el-form-item>
                </div>
            </el-form>
        </div>
        <template #footer>
            <view class="dialog-footer">
                <el-button @click="baTable.table.extend!.showReceiveDialog = false">取消</el-button>
                <el-button type="primary" @click="onReceive">确定</el-button>
            </view>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { computed, inject, onMounted, ref } from 'vue'
import type baTableClass from '/@/utils/baTable'
import { receive } from '/@/api/backend/shop/order/refund'
import FormItem from '/@/components/formItem/index.vue'
const baTable = inject('baTable') as baTableClass

const orderPayPrice = computed(() => {
    return parseFloat(baTable.table.extend!.orderData.detail.pay_price)
})
const orderPayrefundFreight = computed(() => {
    return parseFloat(baTable.table.extend!.orderData.orderRelation.freight)
})

const refundForm = ref({
    refund_money: 0,
    refund_freight: 0,
    money: 0,
    delivery_company_id: 0,
    delivery_no: '',
})

const onReceive = () => {
    receive({
        id: baTable.table.extend!.orderData.id,
        ...refundForm.value,
    }).then((res) => {
        if (res.code) {
            baTable.table.extend!.showDetailDialog = false
            baTable.table.extend!.showReceiveDialog = false
            baTable.onTableHeaderAction('refresh', {})
        }
    })
}

onMounted(() => {
    refundForm.value.refund_money = orderPayPrice.value
})
</script>

<style lang="scss">
.receive-dialog {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    .el-alert {
        margin-bottom: 20px;
    }
    .price {
        font-size: 20px;
        color: #f56c6c;
    }
}
</style>
